<template>
    <div>
        <el-collapse-item title="- 位置及显示信息" :name="props.id">
            <ul class="editorformTable" border="1" bordercolor="#ffffff" cellspacing="0" cellpadding="0">
                <li class="editorformItem" v-for="(item, index) in pageItem" :key="index" v-show="item.relyOn ? (style[item.relyOn] ? true : false) : true">
                    <div class="editorformItemName">{{ item.name }}</div>
                    <div class="editorformItemFunc">
                        <formItem :graphic="props.graphic" :data="item" :key="formKey" />
                    </div>
                </li>
            </ul>
        </el-collapse-item>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import formItem from "./components/form.vue";
import { graphicLayer, mars3d } from "@/utils/global";
import propertyEditor from "@/config/property.config";
/**
 * 组件传值
 */
interface Props {
    id?: any; // 默认值
    graphic?: any;
    // texture?: boolean;
}
/**
 * props默认值
 */
const props = withDefaults(defineProps<Props>(), {
    graphic: {},
    // texture: false,
    id: "",
});
// 用于更新用的Key
const formKey: any = ref(new Date().getTime());
// 标绘数据
const graphic = reactive(props.graphic);
// 标绘style样式
const style = reactive(graphic.options.style);
/**
 * 监听标绘修改
 */
graphicLayer
    .on(mars3d.EventType.editMovePoint, (e: any) => {
        /**
         * 编辑修改了点的位置
         */
        formKey.value = new Date().getTime();
    })
    .on(mars3d.EventType.editRemovePoint, (e: any) => {
        /**
         * 编辑删除点事件
         */
        formKey.value = new Date().getTime();
    });

/**
 * 获取标绘编辑属性列表
 */
const pageItem: any = propertyEditor(graphic);

/**
 * 页面参数
 */
// const pageItem = reactive([
//     {
//         name: "经度",
//         prop: "point",
//         viceProp: "lng",
//         type: "text",
//     },
//     {
//         name: "纬度",
//         prop: "point",
//         viceProp: "lat",
//         type: "text",
//     },
//     {
//         name: "海拔高度",
//         prop: "point",
//         viceProp: "alt",
//         type: "text",
//     },
//     {
//         name: "是否按视距缩放",
//         prop: "scaleByDistance",
//         type: "switch",
//     },
//     {
//         name: "上限",
//         prop: "scaleByDistance_far",
//         type: "number",
//         relyOn: "scaleByDistance",
//         numberStep: 1,
//         numberMin: 1,
//     },
//     {
//         name: "比例值",
//         prop: "scaleByDistance_farValue",
//         type: "number",
//         relyOn: "scaleByDistance",
//         numberStep: 0.1,
//         numberMin: 0,
//     },
//     {
//         name: "下限",
//         prop: "scaleByDistance_near",
//         type: "number",
//         relyOn: "scaleByDistance",
//         numberStep: 1,
//         numberMin: 1,
//     },
//     {
//         name: "比例值",
//         prop: "scaleByDistance_nearValue",
//         type: "number",
//         relyOn: "scaleByDistance",
//         numberStep: 0.1,
//         numberMin: 0,
//     },
//     {
//         name: "是否按视距显示",
//         prop: "distanceDisplayCondition",
//         type: "switch",
//     },
//     {
//         name: "最大距离",
//         prop: "distanceDisplayCondition_far",
//         type: "number",
//         relyOn: "distanceDisplayCondition",
//         numberStep: 1,
//         numberMin: 1,
//     },
//     {
//         name: "最小距离",
//         prop: "distanceDisplayCondition_near",
//         type: "number",
//         relyOn: "distanceDisplayCondition",
//         numberStep: 1,
//         numberMin: 0,
//     },
//     {
//         name: "是否贴地",
//         prop: "clampToGround",
//         type: "switch",
//     },
//     {
//         name: "是否被遮挡",
//         prop: "visibleDepth",
//         type: "switch",
//     },
// ]);
</script>
